<template>
    <div class="editPage__video">
        <div class="title">视频设置</div>
        <div class="img__con">
            <el-upload class="avatar-uploader" :action="uploadImgUrl" :data="uploadImgData" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-progress="uploadVideoProcess">
                <video width="100%" v-if="imageUrl" controls="controls" :key="menuKey">
                    <source :src="videoSrc" type="video/mp4" />
                </video>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <el-progress v-if="videoFlag == true" type="line" :percentage="videoUploadPercent"
                    style="margin-top: 30px"></el-progress>
            </el-upload>

            <p>
                说明: 视频格式为mp4格式，每个视频大小不超过300m
            </p>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    props: {
        // 图片数组
        videoSrc: {
            type: String,
            required: false,
            default: ""
        },
        imageUrl: {
            type: String,
            required: false,
            default: ''
        }
    },
    data() {
        return {
            // 视频上传
            uploadImgUrl: `${import.meta.env.VITE_API_BASE_URL}/api/upload`,
            uploadImgData: { busiName: 32 },
            // 应付多个组件的情况 记录当前组件的key值
            componentKey: null,
            menuKey: 1, // 用来强制刷新
            videoFlag: false,  // 进度条相关的
            videoUploadPercent: 0,  // 进度条相关的
        };
    },
    methods: {
        // 上传成功的函数
        handleAvatarSuccess(res, file) {
            // 进度条恢复到初始状态
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            ++this.menuKey;
            // console.log(res)
            this.imageUrl = res.data.url;
            // 这里是向父级传值，不需要就去掉
            this.$emit("childRightFn", {
                ...this.rightData,
                ...{ imageUrl: this.imageUrl },
                ...{ props: { src: this.imageUrl } },
            });
        },
        beforeAvatarUpload(file) {
            //   file.type === "image/jpg" ||
            //   file.type === "image/png";
            const isMp4 = file.type === "video/mp4";
            // 限制文件最大不能超过 300M
            const isLt2M = file.size / 1024 / 1024 < 300;

            if (!isMp4) {
                this.$message.error("视频只能是mp4格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 300MB!");
            }
            return isMp4 && isLt2M;
        },

        //进度条
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = parseInt(file.percentage);
        },
    }
}

</script> 

<style lang="scss" scoped>
.editPage__video {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 16px;
        color: #8c939d;
        width: 350px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .avatar {
        width: 350px;
        height: auto;
        display: block;
    }

    .title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .img__con {
        .el-button {
            width: 100%;
            margin: 10px 0 20px 0;
        }
    }
}
</style>